<%--
  Created by IntelliJ IDEA.
  User: 11843
  Date: 2024/12/30
  Time: 9:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function () {
        var chart = echarts.init(document.getElementById('main'));

        function fetchData() {
            fetch('ss')
                .then(response => response.json())
                .then(data => {
                    console.log('Received data:', data); // 调试信息
                    const maleData = data.filter(d => d.gender === '1').map(d => d.count);
                    const femaleData = data.filter(d => d.gender === '0').map(d => d.count);
                    const semester = data.filter(d => d.gender === '1').map(d => "学期:"+d.semester+"班级:"+d.class_id);
                    //      const class_id = data.filter(d => d.gender === '1').map(d => d.class_id);


                    chart.setOption({
                        title: {
                            text: '不同学期各个班级的男女各自的人数'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {},
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: semester
                        },
                        series: [
                            {
                                name: 'male',
                                type: 'bar',
                                data: maleData
                            },
                            {
                                name: 'female',
                                type: 'bar',
                                data: femaleData
                            }
                        ]
                    });
                })
                .catch(error => console.error('Error fetching data:', error));
        }

        // 初始加载数据
        fetchData();
        // 定时刷新数据
        setInterval(fetchData, 2000);
    });


</script>
</body>
</html>
